<template>
  <el-menu
    class="side-menu"
    :default-active="activeMenu"
    router
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <!-- 顶岗实习 -->
    <el-sub-menu index="1">
      <template #title>
        <el-icon><calendar /></el-icon>
        <span>顶岗实习</span>
      </template>
      <el-menu-item index="/DGSX/DGSXSQ">顶岗实习申请</el-menu-item>
      <el-menu-item index="/DGSX/WDCJ">我的顶岗实习</el-menu-item>
      <el-menu-item index="/DGSX/WDDGSX">我的成绩</el-menu-item>
      <el-menu-item index="/DGSX/WDSQ">我的申请</el-menu-item>
    </el-sub-menu>

    <!-- 生产实习 -->
    <el-sub-menu index="2">
      <template #title>
        <el-icon><comment /></el-icon>
        <span>生产实习</span>
      </template>
      <el-menu-item index="/SCSX/SCSXSQ">生产实习申请</el-menu-item>
      <el-menu-item index="/SCSX/WDSCSX">我的生产实习</el-menu-item>
      <el-menu-item index="/SCSX/WDCJ">我的成绩</el-menu-item>
      <el-menu-item index="/SCSX/WDSQ">我的申请</el-menu-item>
    </el-sub-menu>

    <!-- 分享 -->
    <el-sub-menu index="3">
      <template #title>
        <el-icon><search /></el-icon>
        <span>分享</span>
      </template>
      <el-menu-item index="/FX/XXSH">信息审核</el-menu-item>
      <el-menu-item index="/FX/WDFX">我的分享</el-menu-item>
      <el-menu-item index="/FX/TLQ">讨论区</el-menu-item>
    </el-sub-menu>

    <!-- 实习管理 -->
    <el-sub-menu index="4">
      <template #title>
        <el-icon><user /></el-icon>
        <span>实习管理</span>
      </template>
      <el-menu-item index="/ShiXiGuanli/DGSXCJTJ">生产实习审核</el-menu-item>
      <el-menu-item index="/ShiXiGuanli/DGSXGCGL">生产实习过程管理</el-menu-item>
      <el-menu-item index="/ShiXiGuanli/DGSXSH">生产实习成绩统计</el-menu-item>
      <el-menu-item index="/ShiXiGuanli/SCSXCJTJ">顶岗实习审核</el-menu-item>
      <el-menu-item index="/ShiXiGuanli/SCSXGCGL">顶岗实习过程管理</el-menu-item>
      <el-menu-item index="/ShiXiGuanli/SCSXSH">顶岗实习成绩统计</el-menu-item>
    </el-sub-menu>

    <!-- 信息管理 -->
    <el-sub-menu index="5">
      <template #title>
        <el-icon><data-line /></el-icon>
        <span>信息管理</span>
      </template>
      <el-menu-item index="/XinXiGuanli/DGSXXXGL">学生信息管理</el-menu-item>
      <el-menu-item index="/XinXiGuanli/JSXXGL">教师信息管理</el-menu-item>
      <el-menu-item index="/XinXiGuanli/SCSXXXGL">生产实习信息管理</el-menu-item>
      <el-menu-item index="/XinXiGuanli/XSXXGL">顶岗实习信息管理</el-menu-item>
    </el-sub-menu>

    <!-- 系统管理 -->
    <el-sub-menu index="6">
      <template #title>
        <el-icon><setting /></el-icon>
        <span>系统管理</span>
      </template>
      <el-menu-item index="/XitongGuanli/YHGL">用户管理</el-menu-item>
      <el-menu-item index="/XitongGuanli/CDGL">菜单管理</el-menu-item>
      <el-menu-item index="/XitongGuanli/JSXXGL">角色信息管理</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import {
  Calendar,
  Comment,
  Search,
  User,
  DataLine,
  Setting
} from '@element-plus/icons-vue'

const route = useRoute()
const activeMenu = ref('')

watch(() => route.path, (newPath) => {
  activeMenu.value = newPath
}, { immediate: true })
</script>

<style scoped lang="scss">
.side-menu {
  height: 100%;
  border-right: none;
  
  /* 新增以下样式移除滚动条 */
  overflow: hidden;
  
  /* 确保菜单内容不会导致滚动条出现 */
  :deep(.el-menu) {
    overflow: hidden;
    height: 100%;
    
    /* 确保菜单项不会超出容器 */
    display: flex;
    flex-direction: column;
  }

  /* 子菜单标题样式 */
  :deep(.el-sub-menu__title) {
    height: 50px;
    line-height: 50px;
    margin: 4px 0;
    
    &:hover {
      background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    .el-icon {
      font-size: 18px;
      margin-right: 8px;
    }
  }

  /* 菜单项样式 */
  .el-menu-item {
    height: 45px;
    line-height: 45px;
    margin: 2px 0;
    padding-left: 50px !important;
    
    &:hover {
      background-color: rgba(255, 255, 255, 0.1) !important;
    }
    
    &.is-active {
      background-color: rgba(255, 208, 75, 0.2) !important;
    }
    
    .el-icon {
      font-size: 16px;
      margin-right: 8px;
    }
  }

  /* 子菜单展开时的样式 */
  :deep(.el-sub-menu.is-opened) {
    .el-sub-menu__title {
      background-color: rgba(255, 255, 255, 0.05) !important;
    }
  }
}
</style>